lots of updates, implementing design, refactoring, bug fixes and more

4 files changed, 125 insertions, 43 deletions

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 1935b156..4c0e4cfc 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -1,5 +1,70 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { rate, user, preferredCurrency } from '$lib/store';
+
+	$: btcPrice = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($rate);
+
+	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($user.account.balance * ($rate / 100000000));
+
+	$: accountBalanceBtc = $user.account.balance / 100000000;
+
+	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$user.account.balance
+	);
+
+	$: feeAmount = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(($user.account.balance * ($rate / 100000000)) / 100);
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
+
+	<div
+		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
+	>
+		<h2 class="text-2xl font-semibold">{$user.username}</h2>
+		<span class="text-secondary">Address goes here</span>
+	</div>
+
+	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
+		<div>
+			<h1 class="text-4xl font-semibold mb-8">Dashboard</h1>
+
+			<span class="text-secondary mx-auto text-lg font-bold"
+				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+				{$preferredCurrency}
+			</span>
+
+			<span class="text-secondary block mt-1"
+				>Data from <span class="text-black">Binance</span>.
+			</span>
+
+			<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+				ACCOUNT BALANCE
+			</h3>
+
+			<span class="text-3xl font-bold block mb-1"
+				>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
+			>
+
+			<span class="text-secondary text-xl block"
+				>{accountBalanceBtc} BTC ({accountBalanceSats} SATS)
+			</span>
+
+			<button class="rounded-full border py-2 font-bold w-28 mt-4">Withdraw</button>
+			<p class="text-secondary mt-2 w-full md:w-[550px]">
+				You will be charged a 1% withdrawal fee (<span class="text-black"
+					>{$rate ? feeAmount : 'fetching rate...'}</span
+				>) on your balance.
+			</p>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 6002efdc..41d60849 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/env';
 	import { onMount } from 'svelte';
 	import { AppHeader, Icon, PageNotFound } from '$comp';
@@ -14,7 +13,7 @@
 			let { default: QRCodeStyling } = await import('qr-code-styling');
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
-				type: 'svg',
+				type: 'canvas',
 				data: 'add static qr here',
 				image: '/images/invoice.svg',
 				backgroundOptions: {
@@ -33,18 +32,6 @@
 	});
 
 	let followed = false;
-
-	let qrSkeleton = true;
-	setTimeout(() => (qrSkeleton = false), 100);
-
-	const handleCopy = () => {
-		copy(lightningAddress);
-		toast.push('Copied!', {
-			theme: {
-				'--toastBarBackground': '#2F855A'
-			}
-		});
-	};
 </script>
 
 {#if username}
@@ -57,33 +44,30 @@
 
 				<p class="text-secondary">Address goes here</p>
 
-				<button
+				<!--
+        we need to hook this up
+        <button
 					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
 					on:click={() => (followed = !followed)}
 					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
 					{followed ? 'Remove' : 'Follow'}
 				</button>
+        -->
 			</div>
 
 			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
 				<div
 					id="qr"
-					class="border border-lightgrey rounded-3xl flex md:p-5 justify-center items-center relative"
-				>
-					<div
-						class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
-							? 'block'
-							: 'hidden'}"
-					/>
-				</div>
+					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+				/>
 
-				<p class="text-secondary text-center font-semibold">Scan to pay with Bitcoin</p>
+				<p class="text-secondary text-center font-semibold">Scan to pay with bitcoin</p>
 
 				<div
 					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
 				>
 					<span>{lightningAddress}</span>
-					<button on:click={handleCopy}>
+					<button on:click={() => copy(lightningAddress)}>
 						<Icon icon="copy" style="ml-2" />
 					</button>
 				</div>
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index 50fddbed..f0fa0fbd 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -3,13 +3,12 @@
 	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
-	import { post } from '$lib/utils';
+	import { post, warning } from '$lib/utils';
 	import { page } from '$app/stores';
 
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
-	let message = '';
 
 	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
 
@@ -33,9 +32,6 @@
 	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
 
 	const handleInput = (value) => {
-		if (message) {
-			message = '';
-		}
 		if (useFiat) {
 			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
 				amountFiat = value;
@@ -54,7 +50,7 @@
 					}
 				}
 			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				message = 'Please enter an amount less than 1 bitcoin.';
+				warning('Please enter an amount less than 1 bitcoin.');
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
 			} else {
@@ -74,7 +70,7 @@
 					}
 				}
 			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				message = 'Please enter an amount less than 1 bitcoin.';
+				warning('Please enter an amount less than 1 bitcoin.');
 			} else {
 				amountSats = amountSats + value;
 			}
@@ -118,16 +114,6 @@
 					>
 				</div>
 
-				<!-- error message -->
-				{#if message}
-					<div
-						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
-					>
-						<Icon icon="info" style="w-5" />
-						<p>{message}</p>
-					</div>
-				{/if}
-
 				<!-- numpad -->
 				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
 					{#each numPad as value}
@@ -172,10 +158,12 @@
 						on:click={submit}
 						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
 					>
+					<!--
 					<button
 						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
 						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
 					>
+          -->
 				</div>
 			</div>
 		{:else}
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
new file mode 100644
index 00000000..7dd254c1
--- /dev/null
+++ b/src/routes/[username]/support.svelte
@@ -0,0 +1,45 @@
+<script>
+	// this needs to be hooked up to the backend
+	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+
+		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+			<div>
+				<label for="email" class="font-semibold">Email</label>
+				<input class="block border rounded-xl p-2 w-full" type="email" name="email" required />
+			</div>
+
+			<div>
+				<label for="account" class="font-semibold">Account Name</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={$user.username}
+				/>
+			</div>
+
+			<div>
+				<label for="message" class="font-semibold">Message</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					required
+				/>
+			</div>
+
+			<button class="bg-black text-white font-bold rounded-xl py-3 w-full mx-auto">Send</button>
+		</form>
+	</div>
+{/if}